<template>
  <el-container class="panel-block">
    <el-header class="sa-header">
      <el-tabs class="sa-tabs" v-model="configType" @tab-change="getData">
        <el-tab-pane v-for="c in configList" :key="c" :label="c.label" :name="c.api"></el-tab-pane>
      </el-tabs>
    </el-header>
    <el-main class="sa-p-t-30">
      <el-row :gutter="16">
        <el-col :xs="24" :sm="20" :md="18" :lg="14" :xl="14">
          <template v-if="configType == 'admin.config.basic.site'">
            <el-form
              :model="state.site.model"
              :rules="state.site.rules"
              ref="siteRef"
              label-width="180px"
            >
              <el-form-item label="Logo" prop="logo">
                <sa-uploader v-model="state.site.model.logo" fileType="image"></sa-uploader>
              </el-form-item>
              <el-form-item label="站点名称" prop="name">
                <el-input placeholder="请输入站点名称" v-model="state.site.model.name"></el-input>
              </el-form-item>
              <el-form-item label="版本号" prop="version">
                <el-input placeholder="请输入版本号" v-model="state.site.model.version"></el-input>
              </el-form-item>
              <el-form-item label="版权信息">
                <el-row :gutter="16" class="version-copy">
                  <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                    <el-form-item prop="copyright">
                      <el-input
                        placeholder="请输入版权信息"
                        v-model="state.site.model.copyright"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                    <el-form-item prop="copytime">
                      <el-input
                        placeholder="请输入版权信息"
                        v-model="state.site.model.copytime"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form-item>
              <!-- <el-form-item label="全站Cdn地址" prop="cdnurl">
                <el-input
                  placeholder="请输入全站Cdn地址"
                  v-model="state.site.model.cdnurl"
                ></el-input>
              </el-form-item> -->
              <el-form-item label="备案号" prop="beian">
                <el-input placeholder="请输入备案号" v-model="state.site.model.beian"></el-input>
              </el-form-item>
              <el-form-item label="工信部网址" prop="beian_url">
                <el-input
                  placeholder="请输入工信部网址"
                  v-model="state.site.model.beian_url"
                ></el-input>
              </el-form-item>
            </el-form>
          </template>
          <template v-if="configType == 'admin.config.basic.login'">
            <el-form
              :model="state.login.model"
              :rules="state.login.rules"
              ref="loginRef"
              label-width="180px"
            >
              <el-form-item label="登录背景" prop="bg">
                <sa-uploader v-model="state.login.model.bg" fileType="image"></sa-uploader>
              </el-form-item>
              <el-form-item label="登录验证码" prop="captcha" required>
                <el-radio-group v-model="state.login.model.captcha">
                  <el-radio label="none">关闭验证码</el-radio>
                  <el-radio label="code">图片验证码</el-radio>
                  <!-- <el-radio label="geetest">极验验证码</el-radio> -->
                </el-radio-group>
              </el-form-item>
              <template v-if="state.login.model.captcha == 'code'">
                <div class="sa-title--line sa-m-b-30">图片验证码</div>
                <el-form-item label="算数验证码" prop="captcha_code.math" required>
                  <el-switch
                    v-model="state.login.model.captcha_code.math"
                    :active-value="1"
                    :inactive-value="0"
                  ></el-switch>
                </el-form-item>
              </template>
              <template v-if="state.login.model.captcha == 'geetest'">
                <div class="sa-title--line sa-m-b-30">极验验证码</div>
                <el-form-item label="极验Captchald" prop="captcha_geetest.captcha_id">
                  <el-input
                    placeholder="请输入Captchald"
                    v-model="state.login.model.captcha_geetest.captcha_id"
                  ></el-input>
                </el-form-item>
                <el-form-item label="极验PrivateKey" prop="captcha_geetest.private_key">
                  <el-input
                    placeholder="请输入PrivateKey"
                    v-model="state.login.model.captcha_geetest.private_key"
                  ></el-input>
                </el-form-item>
              </template>
            </el-form>
          </template>
          <template v-if="configType == 'admin.config.basic.user'">
            <el-form
              :model="state.user.model"
              :rules="state.user.rules"
              ref="userRef"
              label-width="180px"
            >
              <el-form-item label="默认头像" prop="avatar">
                <sa-uploader v-model="state.user.model.avatar" fileType="image"></sa-uploader>
              </el-form-item>
              <el-form-item label="默认昵称" prop="nickname">
                <el-input
                  placeholder="请输入默认昵称"
                  v-model="state.user.model.nickname"
                ></el-input>
              </el-form-item>
            </el-form>
          </template>
          <template v-if="configType == 'admin.config.basic.mail'">
            <el-form
              :model="state.mail.model"
              :rules="state.mail.rules"
              ref="mailRef"
              label-width="180px"
            >
              <el-form-item label="邮件服务器" prop="smtp_host">
                <el-input
                  placeholder="请输入邮件服务器"
                  v-model="state.mail.model.smtp_host"
                ></el-input>
              </el-form-item>
              <el-form-item label="邮件服务器端口" prop="smtp_port">
                <el-input
                  placeholder="请输入邮件服务器端口"
                  v-model="state.mail.model.smtp_port"
                ></el-input>
              </el-form-item>
              <el-form-item label="邮件服务用户名" prop="smtp_user">
                <el-input
                  placeholder="请输入邮件服务用户名"
                  v-model="state.mail.model.smtp_user"
                ></el-input>
              </el-form-item>
              <el-form-item label="邮件服务密码" prop="smtp_pass">
                <el-input
                  placeholder="请输入邮件服务密码"
                  v-model="state.mail.model.smtp_pass"
                ></el-input>
              </el-form-item>
              <el-form-item label="发件人邮箱" prop="from">
                <el-input placeholder="请输入发件人邮箱" v-model="state.mail.model.from"></el-input>
              </el-form-item>
              <el-form-item label="发件人姓名" prop="from_name">
                <el-input
                  placeholder="请输入发件人姓名"
                  v-model="state.mail.model.from_name"
                ></el-input>
              </el-form-item>
              <el-form-item label="邮件服务验证方式">
                <el-select
                  v-model="state.mail.model.verify_type"
                  placeholder="请选择邮件服务验证方式"
                >
                  <el-option
                    v-for="item in mailTemplate"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </template>
        </el-col>
      </el-row>
    </el-main>
    <el-footer class="sa-footer--submit">
      <el-button @click="getData">重置</el-button>
      <el-button type="primary" @click="onUpdate">保存</el-button>
    </el-footer>
  </el-container>
</template>

<script>
  export default {
    name: 'admin.config.basic',
  };
</script>

<script setup>
  import { reactive, ref, onMounted, computed, getCurrentInstance } from 'vue';
  import admin from '@/app/admin/api';
  import { checkAuth } from '@/sheep/directives/auth';

  const { proxy } = getCurrentInstance();

  const configList = computed(() => {
    const config = [
      { label: '站点配置', api: 'admin.config.basic.site' },
      { label: '登录配置', api: 'admin.config.basic.login' },
      { label: '用户配置', api: 'admin.config.basic.user' },
      { label: '邮件配置', api: 'admin.config.basic.mail' },
    ];
    return config.filter((c) => {
      if (checkAuth(c.api)) return c;
    });
  });
  const configType = ref(configList.value.length > 0 ? configList.value[0].api : '');

  const mailTemplate = [
    { name: '无', value: '' },
    { name: 'SSL', value: 'ssl' },
    { name: 'TLS', value: 'tls' },
  ];

  // 表单数据
  const state = reactive({
    site: {
      model: {},
      // rules: {
      //   logo: [{ required: true, message: "请选择系统Logo", trigger: "blur" }],
      //   name: [{ required: true, message: "请输入系统名称", trigger: "blur" }],
      //   version: [{ required: true, message: "请输入版本号", trigger: "blur" }],
      //   copyright: [
      //     { required: true, message: "请输入版权信息", trigger: "blur" },
      //   ],
      //   copytime: [
      //     { required: true, message: "请输入版权时间", trigger: "blur" },
      //   ],
      //   cdnurl: [
      //     { required: true, message: "请输入全站Cdn地址", trigger: "blur" },
      //   ],
      //   beian: [{ required: true, message: "请输入备案号", trigger: "blur" }],
      //   beian_url: [
      //     { required: true, message: "请输入工信部网址", trigger: "blur" },
      //   ],
      // },
    },
    login: {
      model: {},
      rules: {
        bg: [{ required: true, message: '请选择登录背景', trigger: 'blur' }],
        captcha_geetest: {
          captcha_id: [{ required: true, message: '请输入极验CaptchaId', trigger: 'blur' }],
          private_key: [{ required: true, message: '请输入极验PrivateKey', trigger: 'blur' }],
        },
      },
    },
    user: {
      model: {},
      rules: {
        avatar: [{ required: true, message: '请选择默认头像', trigger: 'blur' }],
        nickname: [{ required: true, message: '请输入默认昵称', trigger: 'blur' }],
      },
    },
    mail: {
      model: {},
      rules: {
        smtp_host: [{ required: true, message: '请输入邮件服务器', trigger: 'blur' }],
        smtp_port: [{ required: true, message: '请输入邮件服务器端口', trigger: 'blur' }],
        smtp_user: [{ required: true, message: '请输入邮件服务用户名', trigger: 'blur' }],
        smtp_pass: [{ required: true, message: '请输入邮件服务密码', trigger: 'blur' }],
        from: [{ required: true, message: '请输入发件人邮箱', trigger: 'blur' }],
        from_name: [{ required: true, message: '请输入发件人姓名', trigger: 'blur' }],
      },
    },
  });

  // 获取配置信息
  async function getData() {
    let type = configType.value.split('.').pop();
    const { data } = await admin.config.basic[type]();
    state[type].model = data;
  }

  // 提交保存
  function onUpdate() {
    let type = configType.value.split('.').pop();
    const form = proxy.$refs[type + 'Ref'];
    form.validate((valid) => {
      valid && admin.config.basic[type](state[type].model);
    });
  }

  onMounted(() => {
    if (configList.value.length > 0) {
      getData();
    }
  });
</script>
